<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTool>
        <template #before>
          <el-button type="primary" @click="addHouse">添加房产</el-button>
        </template>
        <template #after>
          <el-select v-model="category" filterable placeholder="请选择分类">
            <el-option
              v-for="item in categoryS"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            /></el-select>
          <el-select v-model="agent" placeholder="请选择经济">
            <el-option v-for="item in agents" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-input v-model="search" placeholder="请输入内容" class="input-with-select" />
          <el-button slot="append" icon="el-icon-search" @click="searchBtn" />
        </template>
      </PageTool>
      <el-table :data="formData" border style="width: 100%">
        <el-table-column prop="image" label="头像" width="120px">
          <template v-slot="{row}">
            <img
              v-imgError="require('@/assets/common/bigUserHeader.png')"
              style="width: 100px"
              :src="row.image"
              alt
            >
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" />
        <el-table-column label="标签" prop="tags" />
        <el-table-column label="地址" prop="address" />
        <el-table-column label="分类" prop="category.title" />
        <el-table-column label="经济" prop="agent.name" />
        <el-table-column label="价格" prop="price" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column prop="photos" label="图片" width="120px">
          <template v-slot="{row}">
            <img
              v-imgError="require('@/assets/common/bigUserHeader.png')"
              style="width: 100px"
              :src="row.photos"
              alt
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template v-slot="{row}">
            <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-card>
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="limit"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
      <houseTool ref="form" :show-dialog.sync="showDialog" @uploadList="loadHouseList" />
    </div>
  </div>
</template>
<script>
import { getHouseList, deleteHouse, getHouseCount } from '@/api/house'
import houseTool from './components/index.vue'
import { getAgents } from '@/api/agents'
import { getClassList } from '@/api/classify'
export default {
  components: { houseTool },
  data() {
    return {
      formData: [],
      showDialog: false,
      agents: null,
      categoryS: [],
      search: null,
      limit: 4,
      start: 0,
      total: 1,
      agent: null,
      category: null

    }
  },
  computed: {},
  watch: {},
  async created() {
    this.loadHouseList()
    // 获取经纪人列表
    const res = await getAgents()
    this.agents = res.data
    // console.log(res)
    // 获取分类列表
    const res1 = await getClassList()
    // console.log(93, res1)
    this.categoryS = res1.data
  },
  methods: {
    // 渲染列表
    async loadHouseList() {
      const res = await getHouseList({
        _limit: this.limit,
        _start: this.start
      })
      // console.log(5555, res)
      this.formData = res.data
      // 获取经纪总数量
      const res1 = await getHouseCount()
      this.total = res1.data
    },
    // 分页
    changePage(page) {
      // console.log(page)
      this.start = (page - 1) * this.limit
      this.loadHouseList()
    },
    // 添加房产
    addHouse() {
      this.showDialog = true
      this.$nextTick(() => {
        console.log(11111, this.$refs.form.$refs.uploadImage2)
      })
    },
    // 编辑房产
    editFn(id) {
      this.showDialog = true
      this.$refs.form.getHouseDetails(id)
    },
    // 删除页面
    delFn(id) {
      this.$confirm('是否确定删除权限', '删除', {
        type: 'warning'
      })
        .then(async() => {
          await deleteHouse(id)
          this.loadHouseList()
        })
        .catch(() => {
          // console.log('取消了')
        })
    },
    async searchBtn() {
      const results = await getHouseList({
        title_contains: this.search,
        agent: this.agent,
        category: this.category
      })
      console.log(33333, results)
      this.formData = results.data
    }
  }
}
</script>
<style scoped>
</style>
